<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="borderSrc" alt />
      </div>
      <span class="logo">TDYWZ</span>
      <span class="title">电商系统实时监控系统</span>
      <div class="title-right">
        <i class="iconfont icon-theme" @click="changeTheme"></i>
        <!-- <img src="/static/img/qiehuan_dark.png" class="qiehuan" /> -->
        <span class="datetime">{{ newDate }}</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="[fullScreenStatus.trend ? 'fullscreen' : '']">
          <div class="resize" @click="changeSize('trend')">
            <i
              :class="[fullScreenStatus.trend ? 'iconfont icon-suoxiao' : 'iconfont icon-quanping']"
            ></i>
          </div>
          <trend ref="trend"></trend>
          <!-- 销量趋势图表 -->
        </div>
        <div id="left-bottom" :class="[fullScreenStatus.seller ? 'fullscreen' : '']">
          <div class="resize" @click="changeSize('seller')">
            <i
              :class="[fullScreenStatus.seller ? 'iconfont icon-suoxiao' : 'iconfont icon-quanping']"
            ></i>
          </div>
          <!-- 商家销售金额图表 -->
          <seller ref="seller"></seller>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top" :class="[fullScreenStatus.map ? 'fullscreen' : '']">
          <div class="resize" @click="changeSize('map')">
            <i :class="[fullScreenStatus.map ? 'iconfont icon-suoxiao' : 'iconfont icon-quanping']"></i>
          </div>
          <mapPage ref="map"></mapPage>
          <!-- 商家分布图表 -->
        </div>
        <div id="middle-bottom" :class="[fullScreenStatus.rank ? 'fullscreen' : '']">
          <div class="resize" @click="changeSize('rank')">
            <i
              :class="[fullScreenStatus.rank ? 'iconfont icon-suoxiao' : 'iconfont icon-quanping']"
            ></i>
          </div>
          <rank ref="rank"></rank>
          <!-- 地区销量排行图表 -->
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="[fullScreenStatus.hot ? 'fullscreen' : '']">
          <div class="resize" @click="changeSize('hot')">
            <i :class="[fullScreenStatus.hot ? 'iconfont icon-suoxiao' : 'iconfont icon-quanping']"></i>
          </div>
          <hot ref="hot"></hot>
          <!-- 热销商品占比图表 -->
        </div>
        <div id="right-bottom" :class="[fullScreenStatus.stock ? 'fullscreen' : '']">
          <div class="resize" @click="changeSize('stock')">
            <i
              :class="[fullScreenStatus.stock ? 'iconfont icon-suoxiao' : 'iconfont icon-quanping']"
            ></i>
          </div>
          <stock ref="stock"></stock>
          <!-- 库存销量分析图表 -->
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getThemeValue } from '../utils/theme_utils'
import mapPage from '../components/map.vue'
import seller from '../components/seller.vue'
import stock from '../components/Stock.vue'
import rank from '../components/rank.vue'
import hot from '../components/hot.vue'
import trend from '../components/trend.vue'
export default {
  components: {
    mapPage,
    seller,
    stock,
    rank,
    hot,
    trend,
  },
  computed: {
    ...mapState(['theme']),
    borderSrc() {
      return `/static/img/${getThemeValue(this.theme).headerBorderSrc}`
    },
    containerStyle() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor,
      }
    },
  },
  data() {
    return {
      newDate: new Date(),
      // 全屏状态的定义
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false,
      },
    }
  },
  created() {
    this.$socket.registerCallBack('fullScreen', this.recvData)
  },
  destroyed() {
    this.$socket.unRegisterCallBack('fullScreen')
  },
  mounted() {
    this.newDate = this.formatDate(this.newDate)
    setInterval(() => {
      this.newDate = this.formatDate(new Date())
    }, 1000)
  },
  methods: {
    // 切换主题
    changeTheme() {
      alert('切换主题')
      this.$store.commit('changeTheme')
    },
    recvData(data) {
      // 将所有的图表设置为非全屏
      Object.keys(this.fullScreenStatus).forEach(item => {
        this.fullScreenStatus[item] = false
      })
      // 将目标图表设置为目标状态
      this.fullScreenStatus[data.chartName] = data.value
      // 更新所有图表
      Object.keys(this.fullScreenStatus).forEach(item => {
        this.$nextTick(() => {
          this.$refs[item].screenAdapter()
        })
      })
    },
    changeSize(type) {
      const targetValue = !this.fullScreenStatus[type]
      // 联动数据 类似于群发
      this.$socket.send({
        action: 'fullScreen',
        chartName: type,
        socketType: 'fullScreen',
        value: targetValue, //状态
      })
      // 将图标切换显示
      //
      // Object.keys(this.fullScreenStatus).forEach(item => {
      //   this.fullScreenStatus[item] = false
      // })
      // this.fullScreenStatus[type] = targetValue
      // this.$nextTick(() => {
      //   this.$refs[type].screenAdapter()
      // })
    },
    formatDate(inputTime) {
      var date = inputTime
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var minute = date.getMinutes()
      var second = date.getSeconds()
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
    },
  },
}
</script>

<style lang="less" scoped>
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 999;
}
.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
  .screen-header {
    width: 100%;
    height: 64px;
    font-size: 20px;
    position: relative;
    > div {
      img {
        width: 100%;
      }
    }
    .title {
      position: absolute;
      left: 50%;
      top: 50%;
      font-size: 20px;
      transform: translate(-50%, -50%);
    }
    .title-right {
      display: flex;
      align-items: center;
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translateY(-80%);
    }
    .iconfont {
      font-size: 20px;
      color: #2e72bf;
      cursor: pointer;
    }
    .datetime {
      font-size: 15px;
      margin-left: 10px;
    }
    .logo {
      position: absolute;
      left: 0px;
      top: 50%;
      transform: translateY(-80%);
      font-size: 18px;
    }
  }
  .screen-body {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    flex-flow: row;
    align-items: center;
    .screen-left {
      // flex: 1;
      width: 27.6%;
      height: 100%;
      #left-top {
        width: 100%;
        height: 53%;
        position: relative;
        // background-color: aqua;
      }
      #left-bottom {
        width: 100%;
        height: 31%;
        margin-top: 25px;
        position: relative;
        // background-color: aqua;
      }
    }
    .screen-middle {
      width: 41.5%;
      margin: 0 25px;
      height: 100%;
      #middle-top {
        height: 56%;
        position: relative;
        // background-color: aquamarine;
      }
      #middle-bottom {
        height: 28%;
        margin-top: 25px;
        position: relative;
        // background-color: greenyellow;
      }
    }
    .screen-right {
      width: 27.6%;
      height: 100%;
      #right-top {
        width: 100%;
        height: 53%;
        position: relative;
        // background-color: hotpink;
      }
      #right-bottom {
        width: 100%;
        margin-top: 25px;
        height: 31%;
        position: relative;
        // background-color: hotpink;
      }
    }
  }
}
.resize {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  color: #fff;
  z-index: 121;
}
</style>
